<template>
	<m-layout gap="24" title="我的社区">
		<m-block class="mtYeji flex-column p-24">
			<view class="flex-between border-bottom pb-20">
				<view class="">
					<view class="flex">
						<m-icon type="gryj" size="32" class="mr-4" />
						<view class="text-white-70 fs26">总业绩</view>
					</view>
					<view class="text-white">
						<m-number :value="Number(myTotal.amtTeam) + Number(myTotal.amtSelf)" color="#fff" weight="600" size="32"></m-number>
					</view>
				</view>
				<view class="" v-if="userinfo.dls == 5" @click="seeDetail(myTotal)">
					<text class="fs22 text-white">营业厅业绩查询</text>
					<m-icon size="24" color="#FFF" type="icon-qianjin" />
				</view>
				<view class="" v-if="userinfo.dls == 6">
					<text class="fs22 text-white">直推总人数：</text>
					<text class="text-white fs28">{{totalCount}}</text>
				</view>
			</view>
			<view class="flex jc-space-around pt-20">
				<view class="flex-column ai-center jc-center">
					<view class="text-white-70 fs24">个人业绩</view>
					<view class="text-white">
						<m-number :value="myTotal.amtSelf" color="#fff" weight="600" size="32"></m-number>
					</view>
				</view>
				<view class="flex-column ai-center jc-center">
					<view class="text-white-70 fs24">直推业绩</view>
					<view class="text-white">
						<m-number :value="myTotal.amtInv" color="#fff" weight="600" size="32"></m-number>
					</view>
				</view>
				<view class="flex-column ai-center jc-center">
					<view class="text-white-70 fs24">团队业绩</view>
					<view class="text-white">
						<m-number :value="myTotal.teamInv" color="#fff" weight="600" size="32"></m-number>
					</view>
				</view>
			</view>
		</m-block>
		<m-block class="flex-1" bgColor="unset">
			<template v-for="(item, index) in listArr">
				<m-block gap="30 30" spa="16 0 0 0 " class="dataList">
					<view class="h1 flex-between">
						<view class="left">
							<view class="flex">
								<m-icon size="32" type="icon-touxiang" color="var(--text_thenme)"></m-icon>
								<view class="flex-column">
									<text class="fs30">{{ item.invcode }}</text>
									<template v-if="userinfo.dls == 2 && item.dls == 5">
										<text v-if="!item.tag" class="fs24" @click="setName(item)">设置备注</text>
										<text v-else class="fs24">{{ item.tag }}</text>
									</template>
								</view>
							</view>
						</view>
						<view class="">
							<view class="right dls flex-center plr-16 ptb-8">
								<m-icon v-if="item.dls" type="vip6" class="mr-8" color="#FFF"></m-icon>
								<text class="fs21">{{ dlsEnum[item.dls] || '普通用户' }}</text>
							</view>
						</view>
					</view>
					<view class="content">
						<view class="content-1 flex-between">
							<view class="dl">
								<view class="dt">个人业绩</view>
								<view class="dd">
									<m-number :value="item.amtSelf" color="#333" weight="600" size="26"></m-number>
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3, 100]"></m-image>
							<view class="dl">
								<view class="dt">直推业绩</view>
								<view class="dd">
									<m-number :value="item.countInv" color="#333" weight="600" size="26" />
								</view>
							</view>
							<m-image src="../../../static/images/pages/c2c/border-icon.png" :size="[3, 100]"></m-image>
							<view class="dl">
								<view class="dt">团队业绩</view>
								<view class="dd">
									<m-number :value="item.amtTeam" color="#333" weight="600" size="26" />
								</view>
							</view>
						</view>
					</view>
					<view class="flex-between">
						<view class="h3 flex">
							<m-icon size="32" type="icon-dengdaizhong" color="var(--text_thenme)" class="mr-12"></m-icon>
							<text class="fs24">注册时间：{{ item.ctime | mkfsTime }}</text>
						</view>
						<view class="flex fs24" v-if="userinfo.dls == 5 && item.dls == 6" @click="doCopy(item.invcode)">
							<text>推广码：</text>
							<text>{{item.invcode}}</text>
							<m-icon type="icon-fuzhi" size="28" class="ml-4" />
						</view>
					</view>
					
				</m-block>
			</template>
			<m-loading :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount"></m-loading>
		</m-block>
		<!-- 修改昵称弹框 -->
		<m-dialog
			title="设置备注"
			:loading="btnLoading"
			:showCancel="true"
			:isShow="setNameShow"
			@handleCancel="
				setNameShow = false;
				btnLoading = false;
			"
			@handleConfirm="SetUserTagFn"
		>
			<view class="setName-box">
				<view class="form-Item"><input type="text" v-model="nickname" placeholder="请输入备注" /></view>
				<view class="hint"><text>备注长度不超过50个字符</text></view>
			</view>
		</m-dialog>
	</m-layout>
</template>

<script>
import { mapState } from 'vuex';
import { myteam, teamtotal, SetUserTag } from '../../../api/Users.js';
export default {
	name: '',
	data() {
		return {
			myTotal: {}, //  我的个人业绩
			scrollTop: 0,
			listArr: [], // 列表
			pageSize: 20,
			pageIndex: 1,
			pageCount: 1,
			isLoading: true,
			itemOne: {},
			nickname: '',
			setNameShow: false,
			btnLoading: false,
			totalCount:0,
		};
	},
	computed: {
		...mapState({
			userinfo: (state) => state.user.userinfo
		}),
		dlsEnum() {
			const state = this.$store.state.general.enum;
			return state['Dls'];
		}
	},
	watch: {
		idx(val) {
			this.init();
		}
	},
	onPageScroll({ scrollTop }) {
		this.scrollTop = scrollTop;
	},
	onShow() {
		this.$nextTick(() => {
			this.getMyTotal();
			this.init();
		});
	},
	methods: {
		async seeDetail(item) {
			this.Jump({
				url: `/pages/mine/myteam/detail?name=${item.tag}&userid=${item.userid}`
			});
		},
		init() {
			this.pageCount = 1;
			this.pageIndex = 1;
			this.getData();
		},
		async getMyTotal() {
			const { success, msg, data } = await teamtotal();
			this.myTotal = data;
		},
		// 获取分页数据数据
		async getData() {
			if (this.pageIndex > this.pageCount) return;
			this.isLoading = true;
			const { list, pageCount,totalCount } = await myteam({
				pageSize: this.pageSize,
				pageIndex: this.pageIndex
			});
			console.log('list===>', list);
			this.isLoading = false;
			this.pageCount = pageCount;
			this.totalCount = totalCount;
			if (this.pageIndex <= 1) {
				this.listArr = list;
			} else {
				this.listArr = [...this.listArr, ...list];
			}
			this.pageIndex++;
			uni.stopPullDownRefresh();
		},
		setName(item) {
			this.itemOne = item;
			this.setNameShow = true;
		},
		async SetUserTagFn() {
			if (!this.nickname) return this.Toast('请输入备注');
			this.btnLoading = true;
			const { success, msg } = await SetUserTag({
				userid: this.itemOne.userid,
				tag: this.nickname
			});
			this.Toast(msg);
			this.btnLoading = false;
			if (!success) return;
			this.nickname = '';
			this.setNameShow = false;
			this.init();
		}
	},
	onPullDownRefresh() {
		this.init();
	},
	onReachBottom() {
		this.getData();
		console.log('触底了');
	}
};
</script>

<style lang="scss">
page {
}
.mtYeji {
	border-radius: 20rpx;
	background: url('../../../static/images/pages/reward-center/mytotalBg.png') no-repeat !important;
	background-size: 100% 100%;
}

.head {
	border-radius: 20rpx;
	background: url('../../../static/images/pages/reward-center/bg2.png') no-repeat;
	background-size: 100% 100%;

	.h1 {
		padding: 25rpx 0;

		.dl {
			padding-left: 30rpx;

			.dd {
				color: #fff;
			}
			.dt {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
			}
		}
	}

	.line {
		margin-right: 40rpx;
		display: inline-block;
		width: 1rpx;
		height: 30rpx;
		background: #333333;
		border-radius: 1rpx;
	}

	.h2-box {
		padding: 0 30rpx;
		background: rgba(125, 102, 0, 0.1);
	}

	.h2 {
		padding: 15rpx 0;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;

		.dl {
			text-align: left;
			flex: 1;

			.dt {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #fff;
				padding-bottom: 10rpx;
			}

			.dd {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #423600;
			}
		}

		.dl + .dl {
			padding-left: 40rpx;
			position: relative;

			&::after {
				content: '';
				display: inline-block;
				width: 1rpx;
				height: 30rpx;
				background: #333333;
				border-radius: 1rpx;

				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.h2 + .h2 {
		border-top: 1rpx solid #423600;
	}
}

.content {
	padding: 20rpx 0;

	.content-1 {
		border-radius: 21rpx;
		background: #fbfbfb;
		padding: 6rpx 0;

		.dl {
			flex: 1;
			text-align: center;

			.dt {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.content-1 + .content-1 {
		margin-top: 12rpx;
	}
}

.dataList {
	.h1 {
		.left {
			text {
				padding-left: 10rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.right {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}
	}

	.h2 {
		margin: 24rpx 0;
		padding: 22rpx;
		background: #fbfbfb;
		border-radius: 10rpx;

		view {
			text {
				padding-left: 15rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333;
			}
		}
	}

	.h3 {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
}

.dls {
	background: linear-gradient(86deg, #304fff, #304fff);
	border-radius: 40rpx;
	color: #fff;
}
.setName-box {
	padding: 24rpx;

	.form-Item {
		background: #fff;
		border-radius: 15rpx;
		box-sizing: border-box;

		input {
			border-radius: 15rpx;
			padding: 20rpx 28rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #111;
			background: #f6f6f6;
		}
	}

	.hint {
		padding: 24rpx 0 0;
		font-size: 24rpx;
		color: var(--text_1);
	}
}
</style>
